<template>
 <div style="width:100%; height: 50px; line-height: 50px;border-bottom: 1px solid #ccc;display: flex;background: #F2F3F5;box-shadow: 2px 0 6px rgb(0 21 41); ">
   <div style="width: 200px;padding-left: 30px;font-weight: bold;color: aqua">后台管理</div>
   <div style="flex:1;">
     <div style="display: flex">
       <el-icon style="margin-top: 16px;margin-left: 15px"><HomeFilled /></el-icon>
       <el-breadcrumb style="line-height: 50px;display: inline-block;margin-right: 10px" separator="》">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>{{ $route.name }}</el-breadcrumb-item
         >

       </el-breadcrumb>
     </div>
   </div>
   <div style="width: 100px;margin-right: 20px">
<!--     <el-avatar  :size="50" :src="cover" />-->
     <el-dropdown v-if="user.nickName!='请登录'">
       <span class="el-dropdown-link" style="line-height: 50px;cursor: pointer;">
          <el-avatar :size="35" :src="user.avatarUrl" style="position: relative; margin-top: 5px"></el-avatar>
          {{user.nickName}}<i><el-icon><ArrowDownBold /></el-icon></i>
        </span>
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item @click="$router.push('/person')" >个人信息</el-dropdown-item>
           <el-dropdown-item @click="$router.push('/password')">修改密码</el-dropdown-item>
           <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
     <el-dropdown v-if="user.nickName=='请登录'">
       <span class="el-dropdown-link" style="line-height: 50px;cursor: pointer" >
         <span v-if="user.nickName=='请登录'" @click="$router.push('/login')">{{user.nickName}}</span>
<!--          <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        </span>
       <template #dropdown>
       </template>
     </el-dropdown>

   </div>
 </div>
</template>

<script>
import {HomeFilled,ArrowDownBold } from '@element-plus/icons-vue';
export default {
  // props:['user'],
  setup(){
    return{
      HomeFilled
    }
  },
  components:{
    HomeFilled,ArrowDownBold
  },
  name: "Header",
  // mounted() {
  //   bus.on('msg',(e)=>{
  //     console.log(e)
  //   })
  // },
  data(){
    return{
      form:{},
      user:localStorage.getItem("user")? JSON.parse(localStorage.getItem("user")):{nickName:"请登录"},
    }
  },
  methods:{
    logout(){
      this.$router.push("/login");
      localStorage.removeItem("user")
      this.$message.success("退出成功!")
    },

  },
  created() {

  },
  computed:{
    currentPathName(){
      // console.log(this.$store.state.currentPathName)
      return this.$store.state.currentPathName;
    }
  },
  watch:{
    currentPathName(newVal,oldVal){
      console.log(oldVal)
      console.log(newVal)
    }
  }
}
</script>

<style scoped>

</style>